function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea");

    //
    // *** This styling is an extra step which is likely not required. ***
    //
    // Why is it here? To ensure:
    // 1. the element is able to have focus and selection.
    // 2. if element was to flash render it has minimal visual impact.
    // 3. less flakyness with selection and copying which **might** occur if
    //    the textarea element is not visible.
    //
    // The likelihood is the element won't even render, not even a flash,
    // so some of these are just precautions. However in IE the element
    // is visible whilst the popup box asking the user for permission for
    // the web page to copy to the clipboard.
    //

    // Place in top-left corner of screen regardless of scroll position.
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;

    // Ensure it has a small width and height. Setting to 1px / 1em
    // doesn't work as this gives a negative w/h on some browsers.
    textArea.style.width = '2em';
    textArea.style.height = '2em';

    // We don't need padding, reducing the size if it does flash render.
    textArea.style.padding = 0;

    // Clean up any borders.
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';

    // Avoid flash of white box if rendered for any reason.
    textArea.style.background = 'transparent';


    textArea.value = text;

    document.body.appendChild(textArea);

    textArea.select();

    return new Promise(function (resolve, reject) {
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copying text command was ' + msg);
            resolve();
        } catch (err) {
            console.log('Oops, unable to copy');
            reject();
        }
    });

    document.body.removeChild(textArea);
}

Vue.component("aui-codeshow", {
    template: `
        <div class="aui-position-relative aui-codeshow">
            <pre class="language-markup"><code :class="classname" v-html="html"></code></pre>
            <div class="aui-position-absolute aui-codeshow__copy"  
                ref="copy"
                data-toggle="tooltip"
                @click="copytext">copy</div>
        </div>
    `,
    props: {
        language: {
            type: String
        },
        value: {
            required: true
        },
        len: {
            type: Number
        }
    },
    computed: {
        classname: function () {
            return "language-" + this.language;
        },
        html: function () {
            var self = this;
            if (!self.value) {
                return '';
            }

            function htmlEntities(str) {
                return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
            }

            if (window.Prism) {
                if (self.language === "html") {
                    return window.Prism.highlight(self.value, window.Prism.languages.markup);
                } else {
                    return window.Prism.highlight(self.value, window.Prism.languages.css);
                }
            }

            return htmlEntities(self.value);
        },
        s: function () {
            return '';
        }
    },
    data() {
        var ret = {};
        return ret;
    },
    mounted() {
        var self = this;
        self.anuElment = {};
        self.anuElment.copy = $(self.$refs.copy);
        self.anuElment.copy.tooltip({
            html: true,
            placement: 'top',
            trigger: 'focus'
        });
    },
    methods: {
        copytext: function () {
            var self = this;
            copyTextToClipboard(self.value).then(function () {
                self.anuElment.copy.attr("data-original-title", `<span class='aui-color-success'>copy success</span>`);
                self.showTooltip();
            }).catch(function () {
                self.anuElment.copy.attr("data-original-title", `<span class='aui-color-danger'>copy failed</span>`);
                self.showTooltip();
            });
        },
        showTooltip() {
            var self = this;
            self.anuElment.copy.tooltip('fixTitle').tooltip('show');
            setTimeout(function () {
                self.anuElment.copy.tooltip('hide');
            }, 1000);
        },
        highlight() {
            var self = this;
            self.value = self.value + " ";
        },
        getValue() {
            var self = this;
        }
    }
});